<template>
	<view class="" style="width: 100vw;height: 100vh">
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
			<hx-navbar title="置换活动" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
				rightIcon="help" transparent="auto" @clickright="hintClick()"></hx-navbar>
			<view>
				<view class="cont_list" v-for="(item,index) in ExChangeList" :key="index" @click="exChangClick(item)">
				
					<image class="cont_list_image" :src="item.image" mode="scaleToFill"></image>
					<view class="cont_list_name">
						<view style="font-size: 30rpx;">{{item.name}} 置换 ZWB通证积分</view>
						<view class="fsize">
							开始时间：{{formatDateTime(item.jfStartTime)}}
						</view>
						<view class="fsize">
							结束时间：{{formatDateTime(item.jfEndTime)}}
						</view>
					</view>
					<view class="cont_list_type" v-if="item.status==0"
						:style="[{background:kbuttonBgColor},{color:knavgroundColor}]">
						进行中
					</view>
				</view>

			</view>
			<view class="none_box" style="text-align: center;" v-if="ExChangeList.length == 0">
				<image src="@/static/without.png" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				limit: 10,
				list: [],
				hasNextPage: true,
				ExChangeList: []
			}
		},
		onLoad() {
			this.getList()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.hasNextPage = true;
			this.getList()
			setTimeout(function() {
				uni.stopPullDownRefresh()
			}, 2000)
		},
		onReachBottom() {
			if (this.hasNextPage && !this.isLoading) {
				this.page += 1;
				this.getList()
			}
		},
		methods: {
			formatDateTime(cellValue) {
				if (cellValue === " " || !cellValue) {
					return "";
				} else {
					const date = new Date(cellValue);
					// 提取年份、月份、日期、小时、分钟和秒  
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并补零  
					const day = String(date.getDate()).padStart(2, '0'); // 补零  
					const hours = String(date.getHours()).padStart(2, '0'); // 补零  
					const minutes = String(date.getMinutes()).padStart(2, '0'); // 补零  
					const seconds = String(date.getSeconds()).padStart(2, '0'); // 补零  
					// 拼接成所需的格式  
					const formattedDateString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
					return formattedDateString;
				}
			},
			getList() {
				var data = {
					pageNo: this.page,
					pageSize: this.limit
				}
				this.$api.getJfList(data, res => {
					if (res.status) {
						this.ExChangeList = this.ExChangeList.concat(res.data.list);
						this.hasNextPage = res.data.list.length >= this.limit;
					}
				})

			},
			exChangClick(val) {
				const queryString = JSON.stringify(val);

				uni.navigateTo({
					url: `/pages/Exchange/exchangDetails?item=${encodeURIComponent(queryString)}`
				})
			},
			hintClick() {
				uni.navigateTo({
					url: '/pages/Exchange/introduce'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.cont_list {
		margin: 30rpx auto;
		text-align: center;
		width: 690rpx;
		height: 350rpx;
		position: relative;
	}

	.cont_list_image {
		width: 100%;
		height: 350rpx;
		border-radius: 20rpx;

	}

	/* 使用伪元素来创建模糊层 */
	.cont_list_image::after {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #97979730;
		/* 半透明的白色背景，你可以根据需要调整颜色和透明度 */
		filter: blur(0px);
		/* 模糊效果，你可以调整模糊半径 */
		pointer-events: none;
		/* 确保模糊层不会干扰到图片的点击事件 */
		z-index: 1;
		/* 确保模糊层在图片上方 */
	}

	.cont_list_name {
		background: #00000073;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 690rpx;
		border-radius: 0 0 20rpx 20rpx;
		color: #fff;
		font-weight: bold;
		text-align: left;
		padding: 20rpx 13rpx;

		.fsize {
			font-size: 20rpx;
			color: #e6e0e0;
			padding-top: 8rpx;
		}
	}

	.cont_list_type {
		position: absolute;
		font-weight: bolder;
		top: 15rpx;
		left: 20rpx;
		width: 110rpx;
		height: 45rpx;
		border-radius: 25rpx;
		text-align: center;
		line-height: 45rpx;
		font-size: 20rpx;
	}
</style>